<html lang="en" xmlns:th="http://www.thymeleaf.org">
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>添加用户</title>
    <link rel="icon" type="image/x-icon" href="/img/favicon.jpg"/>
</head>
<link rel="stylesheet" href="https://www.purecss.cn/css/pure-min.css">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<link rel="stylesheet" href="https://qidian.gtimg.com/lulu/pure/css/common/ui/Dialog.css">
<script src="https://qidian.gtimg.com/lulu/pure/js/common/ui/Dialog.js"></script>
<style>
    body{
        text-align: center;
    }
    input , button , a{
        margin-top: 3%;
    }
    .hr_active{
        width: 100%;;border:1px solid;color:blue;background-color: blue;
        text-align: center;
    }
    .hr{
        width: 100%;;border:1px solid;color: darkslategray;background-color: darkslategray;
        text-align: center;
    }
    .a{
        color: darkslategray
    }
    .a_active{
        color: blue
    }
</style>
<body>
<h3 align="center" style="color: steelblue">register</h3>
<div style="margin:0 auto;width: 50%;height: auto;display: flex;justify-content: center">
    <div style="width: 25%">
        <a  id="a_teacher" align="center" class="a_active" onclick="teacher()">教师账号</a>
        <hr id="hr_teacher" class="hr_active">
    </div>

    <div style="width: 25%">
        <a id="a_student" align="center" class="a" onclick="student()">学生账号</a>
        <hr id="hr_student" class="hr">
    </div>
</div>


<div id="teacher" style="margin:0 auto;width: 50%;height: auto">
    <form  class="pure-form"  action="/user/insert" method="post" id="form"  >
            <input type="text" class="pure-input-1-2" name="name" placeholder="请输入用户名">
            <input type="text" class="pure-input-1-2" name="phone" placeholder="请输入手机号">
            <input type="password" class="pure-input-1-2" name="passWord" placeholder="请输入登陆密码">
        <button type="button"  onclick="send('/user/insert','/login','form')" class="pure-button pure-input-1-2 pure-button-primary" >注册</button>
    </form>
    <a href="/login">已有账号，立即登陆</a>
    <a href="/" style="color: gray;margin-top: 10px"> >返回首页</a>
</div>

<div id="student" style="margin:0 auto;width: 50%;height: auto;display: none" >
    <form  class="pure-form"  action="/student/insert" method="post" id="form1"  >
            <input type="text" class="pure-input-1-2" name="name" placeholder="请输入学生姓名">
            <input type="text" class="pure-input-1-2" name="number" placeholder="请输入学号">
            <input type="password" class="pure-input-1-2" name="passWord" placeholder="请输入登陆密码">
        <button type="button"  onclick="send('/student/insert','/login','form1')" class="pure-button pure-input-1-2 pure-button-primary" >注册</button>
    </form>
    <a href="/login">已有账号，立即登陆</a>
    <a href="/" style="color: gray;margin-top: 10px"> >返回首页</a>
</div>

</body>

<script>
    function student() {
        $("#hr_student").addClass("hr_active").removeClass("hr");
        $("#hr_teacher").addClass("hr").removeClass("hr_active");
        $("#a_student").addClass("a_active").removeClass("a");
        $("#a_teacher").addClass("a").removeClass("a_active");
        $("#student").show();
        $("#teacher").hide();
    }
    function teacher() {
        $("#hr_teacher").addClass("hr_active").removeClass("hr");
        $("#hr_student").addClass("hr").removeClass("hr_active");
        $("#a_teacher").addClass("a_active").removeClass("a");
        $("#a_student").addClass("a").removeClass("a_active");
        $("#teacher").show();
        $("#student").hide();
    }

    function send(url,jumpurl,form) {
        //创建异步对象
        var xhr = new XMLHttpRequest();
        //设置请求的类型及url
        xhr.open('post', url,true);
        //post请求一定要添加请求头才行不然会报错
        xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        //发送请求
        var data = $("#"+form).serialize();
        // FirstName=Bill&LastName=Gates
        console.log(data);
        xhr.send(data);
        xhr.onreadystatechange = function () {
            // 这步为判断服务器是否正确响应
            if (xhr.readyState == 4 && xhr.status == 200) {
                // console.log(xhr.responseText);
                var re = JSON.parse(xhr.responseText);
                if(re.code == 200 ){
                    new Dialog().alert('操作成功！', {
                        type: 'success'
                    });
                    setTimeout(window.location = "/login",2000);
                    // setTimeout(window.location = "/login",2000);
                }else{
                    new Dialog().alert(re.msg+"!", {
                        type: 'failure'
                    });
                }
            }
        };
    }
    function jump() {
        window.location = "/login"
    }



</script>

</html>